<!DOCTYPE html>

<html class="no-js" lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org"> 

<head th:replace="common/sections :: header-css"/>

<body>


	<!-- Left Panel -->
	<aside th:replace="common/menus :: left-panel"></aside>

    <!-- Right Panel -->
	<div id="right-panel" class="right-panel">
	
		<header th:replace="common/menus :: rp-header"/>
		
		<div th:replace="common/menus :: rp-breadcrumbs (pageTitle='Withdraw')"/>
    
    	<!-- Page Content Begin -->
    
	    	<div class="content mt-3">
	            <div class="animated fadeIn">
	                
	                <div class="row">				
		    			<div class="col-lg-12">
	                    	<div class="card">
                      			<div class="card-header bg-flat-color-1">
                        			<strong class="card-title text-white">Withdraw from Account</strong>
                      			</div>
	                      		<form th:action="@{/account/withdraw}" method="post">
		                     		<div class="card-body card-block">
	                   					<div class="form-group text-left">
	                   						<div class="sufee-alert alert with-close alert-danger alert-dismissible fade show" th:if="${errorMsg}">
						                       <span class="badge badge-pill badge-danger">Error</span>
						                         <span th:text="${errorMsg}"></span>
						                         <button type="button" class="close" data-dismiss="alert" aria-label="Close">
						                           <span aria-hidden="true">&times;</span>
						                       </button>
						                   </div>
	                   					</div>
	                   					
		                      			<div class="row form-group">
		    								<div class="col col-sm-5">
					                            <label class=" form-control-label"><strong>Account for Withdraw</strong></label>
				                            	<div class="form-inline">
					                            	<select class="form-control" th:field="*{account.id}" id="selectedAccount" name="selectedAccount" required onchange="showSelectedBalance()">
					                            		<option class="text-light"value="">---------- Select Account -----------</option>
					                              		<option th:each="acct : ${accountList}" th:text="|${acct.name} (${acct.AccountType.name})|" th:value="${acct.id}"></option>
					            					</select>
					            					<small id="selectedAccountBalance" class="text-muted ml-2"></small>
					            				</div>
					                        </div>
					                   	</div>
		                        		<div class="row form-group">
		                        			<div class="col col-sm-3">
					                            <label class="form-control-label"><strong>Withdraw Amount</strong></label>
					                            <input type="text" class="form-control" th:field="${transaction.amount}" required th:pattern="${patternTransactionAmount}">
					                        	<small class="form-text text-muted">ex. 25.00</small>
					                        </div>
		                        		</div>		
                      				</div> <!-- End Card Body -->
		                   			<div class="card-footer">
		                     			<button type="submit" class="btn btn-primary btn-sm"><i class="fa fa-dot-circle-o"></i> Submit</button>
		                     			<button type="reset" class="btn btn-danger btn-sm"><i class="fa fa-ban"></i> Reset</button>
		                  			</div> <!-- End Card Footer -->	
                     			</form>
                    		</div> <!-- End Card -->
                 		</div> <!-- End Column-->
                	</div> <!-- End Row -->
                	
	            </div><!-- .animated -->
	        </div><!-- .content -->
	        
	    <!-- Page Content End -->
	    
	</div> <!-- End right panel -->
    
	<!-- Footer -->
	<div th:replace="common/sections :: footer-scripts"></div>
	
	<!-- Displays the current balance of the selected account -->
	<script th:inline="javascript">
        /*<![CDATA[*/
        function showSelectedBalance() {
            var accounts = /*[[${accountList}]]*/ null;
            var selectedIndex = $("#selectedAccount option:selected").index();
            var selectedAccount = accounts[selectedIndex-1];
            if (selectedAccount) {
            	$("#selectedAccountBalance").text("Balance: $"+selectedAccount.currentBalance.toFixed(2));
            } else {
            	$("#selectedAccountBalance").text("");
            }
        }
        $(function() { showSelectedBalance(); });
        /*]]>*/
	</script>

</body>
</html>
